<template>
  <div class="common-body">
    <!--  顶部面包屑  -->
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/inventoryManagement' }"
          >库存管理(财务)</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/inventoryManagement/transferFinanceWarehousing/whole'
          }"
          >运输财务入库管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="$route.query.type === 'approval'"
          :to="{
            path: '/inventoryManagement/financeTransportApproval/approvalPending'
          }"
          >财务入库审批
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          查看<span class="ccui-curr-crumb" :style="{ paddingLeft: '10px' }">{{
            storageName
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="isTrue" class="detail-box ccui-clearfix">
      <div class="detail-info">
        <!--审批状态 icon-->
        <div class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>

        <div class="detail-info-form-container">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            class="el-tabs__customize"
          >
            <el-tab-pane label="基本信息" name="first">
              <el-group-title class="d_jump">
                <template slot="groupTitle">
                  <el-form
                    :model="form"
                    ref="formDateBUI"
                    label-width="160px"
                    class="ccui-form"
                  >
                    <div v-if="basicInfoObj['finType'] == '物资运输'">
                      <el-col
                        v-for="(item, index) in basicInfo"
                        :span="item.colSpan || 12"
                        :key="index"
                      >
                        <!-- <el-form-item v-if="item.label=='备注'" label="备注：" class="remarkClass">
                      <div class="el-none">
                        <moreText :content="basicInfoObj['remark']" />
                      </div>
                    </el-form-item> -->
                        <el-form-item :label="item.label + '：'">
                          <div
                            class="el-none"
                            :title="basicInfoObj[item.value]"
                          >
                            {{ basicInfoObj[item.value] }}
                          </div>
                        </el-form-item>
                      </el-col>
                    </div>
                    <div v-else>
                      <el-col
                        v-for="(item, index) in basicInfo1"
                        :span="item.colSpan || 12"
                        :key="index"
                      >
                        <!-- <el-form-item v-if="item.label=='备注'" label="备注：" class="remarkClass">
                      <div class="el-none">
                        <moreText :content="basicInfoObj['remark']" />
                      </div>
                    </el-form-item> -->
                        <el-form-item :label="item.label + '：'">
                          <div
                            class="el-none"
                            :title="basicInfoObj[item.value]"
                          >
                            {{ basicInfoObj[item.value] }}
                          </div>
                        </el-form-item>
                      </el-col>
                    </div>
                  </el-form>
                </template>
              </el-group-title>
            </el-tab-pane>
            <el-tab-pane label="采购清单" name="second">
              <div class="ccui-multifunctional-table-wrapper">
                <el-table
                  :data="tableData"
                  border
                  max-height="99999"
                  class="ccui-form-child-table"
                  ref="contractList"
                  show-summary
                  :summary-method="getSummaries"
                >
                  <el-table-column
                    v-for="(item, i) in tableColumnContractList"
                    :label="item.label"
                    :type="item.type"
                    :align="item.align || 'left'"
                    :header-align="item.headerAlign || 'left'"
                    :prop="item.prop"
                    :fixed="item.fixed"
                    :width="item.width"
                    :key="i"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="关联入库单" v-if="finType === 0" name="third">
              <div class="ccui-multifunctional-table-wrapper">
                <el-table
                  :data="tableDataAssociation"
                  border
                  max-height="99999"
                  class="ccui-form-child-table"
                  ref="associationList"
                  show-summary
                  :summary-method="getSummaries1"
                >
                  <el-table-column
                    v-for="(item, i) in tableColumnAssociation"
                    :label="item.label"
                    :type="item.type"
                    :align="item.align || 'left'"
                    :header-align="item.headerAlign || 'left'"
                    :prop="item.prop"
                    :fixed="item.fixed"
                    :width="item.width"
                    :key="i"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="附件" name="fourth">
              <upload-info
                v-if="isTrue"
                ref="contractAppendix"
                isTab
                state="detail"
                v-model="fileList"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--  右边审批状态  -->
      <approval-read-record
        :approvalRecordData="activities"
      ></approval-read-record>

      <!--  底部导航栏及签名导出  -->
      <!--      运输财务入库-->
      <bottomGuide
        :busiType="busiType"
        :approvalStatus="approving"
        exportMethod="get"
        :methodGetPageType="methodGetPageType"
        :curPageId="$route.params.id"
        :businessCode="businessCode"
        @handleBack="handleBack"
      />
    </div>
  </div>
</template>

<script>
import { getFinStorageById } from "../api/item-detail";
import { ishasAgentId } from "@/basa/utils";
import peopleManage from "../mixins/peopleManage";
import smpState from "@/config/mixins/smp-state";
import publicComponent from "@/basa/components/public";
export default {
  name: "item-detail-approval",
  mixins: [smpState, peopleManage],
  components: {
    UploadInfo: publicComponent.uploadInfo,
    approvalReadRecord: publicComponent.approvalRecord,
    bottomGuide: publicComponent.bottomGuide
  },
  created() {
    this.getFinStorageById();
    this.handlExport();
  },
  data() {
    return {
      methodGetPageType: "",
      businessCode: "",
      busiType: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      activeName: "first",
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      activities: [],
      form: {},
      storageName: "", // 入库单名称
      fileList: [], // 附件集合
      isTrue: false,
      focus: "formDateBUI",
      basicInfoObj: {},
      basicInfo: [
        {
          label: "供应商",
          value: "supplierName"
        },
        {
          label: "填报单位",
          value: "reportInOrgName"
        },
        {
          label: "入库单编号",
          value: "storageCode"
        },
        {
          label: "入库单名称",
          value: "storageName"
        },
        {
          label: "结算单编号",
          value: "settlementCode"
        },
        {
          label: "结算单名称",
          value: "settlementName"
        },
        {
          label: "合同编号",
          value: "contractCode"
        },
        {
          label: "合同名称",
          value: "contractName"
        },
        {
          label: "类型",
          value: "finType"
        },
        {
          label: "关联入库单",
          value: "refStorageCodeString"
        },
        {
          label: "仓库",
          value: "warehouseName"
        },
        // {
        //   label: "物资来源",
        //   value: "materialForm"
        // },
        {
          label: "运输产品分类名称",
          value: "thirdCategoriesOfName"
        },
        {
          label: "入库数量",
          value: "storageCount"
        },
        {
          label: "入库金额",
          value: "storageMoney"
        },
        {
          label: "编制人",
          value: "reportUsername"
        },
        {
          label: "编制日期",
          value: "reportTime"
        },
        {
          label: "入库类型",
          value: "storageType"
        },
        {
          label: "备注",
          value: "remark",
          colSpan: 13
        }
      ],
      basicInfo1: [
        {
          label: "供应商",
          value: "supplierName"
        },
        {
          label: "填报单位",
          value: "reportInOrgName"
        },
        {
          label: "入库单编号",
          value: "storageCode"
        },
        {
          label: "入库单名称",
          value: "storageName"
        },
        {
          label: "结算单编号",
          value: "settlementCode"
        },
        {
          label: "结算单名称",
          value: "settlementName"
        },
        {
          label: "合同编号",
          value: "contractCode"
        },
        {
          label: "合同名称",
          value: "contractName"
        },
        {
          label: "类型",
          value: "finType"
        },
        // {
        //   label: "物资来源",
        //   value: "materialForm"
        // },
        {
          label: "运输产品分类名称",
          value: "thirdCategoriesOfName"
        },
        {
          label: "入库数量",
          value: "storageCount"
        },
        {
          label: "入库金额",
          value: "storageMoney"
        },
        {
          label: "编制人",
          value: "reportUsername"
        },
        {
          label: "编制日期",
          value: "reportTime"
        },
        {
          label: "入库类型",
          value: "storageType"
        },
        {
          label: "备注",
          value: "remark",
          colSpan: 13
        }
      ],
      tableData: [],
      tableColumnContractList: [
        {
          type: "index",
          label: "序号",
          fixed: true
        },
        {
          label: "批次号",
          prop: "batchNumber",
          width: "260",
          fixed: true
        },
        {
          label: "设备物资名称",
          prop: "materialName",
          width: "300"
        },
        {
          label: "设备物资说明",
          prop: "materialState",
          width: "130"
        },
        {
          label: "计量单位",
          prop: "measureUnit",
          width: "90"
        },
        {
          label: "含税单价",
          prop: "unitPriceWithTax",
          width: "130",
          align: "right"
        },
        {
          label: "含税金额",
          prop: "moneyWithTax",
          width: "130",
          align: "right"
        },
        {
          label: "入库数量",
          prop: "storageCount",
          width: "130"
        },
        {
          label: "税率",
          prop: "taxRatePercent",
          width: "100"
        },
        {
          label: "不含税金额",
          prop: "moneyWithoutTax",
          width: "130",
          align: "right"
        }
      ],
      tableDataAssociation: [],
      tableColumnAssociation: [
        {
          type: "index",
          label: "序号",
          width: "50"
        },
        {
          label: "入库单编号",
          prop: "storageCode",
          width: "200"
        },
        {
          label: "入库单名称",
          prop: "storageName",
          width: "250"
        },
        {
          label: "填报单位",
          prop: "reportInOrgName",
          width: "220"
        },
        {
          label: "供应商",
          prop: "supplierName",
          width: "220"
        },
        {
          label: "分类名称",
          prop: "thirdCategoriesOfName",
          width: "150"
        },
        {
          label: "仓库",
          prop: "warehouseName",
          width: "180"
        },
        {
          label: "入库数量",
          prop: "storageCount",
          width: "140"
        },
        {
          label: "入库金额",
          prop: "storageMoney",
          width: "140",
          align: "right"
        }
      ],
      finType: 0
    };
  },
  watch: {
    $route(to, form) {
      if (to.name == "contractChangeEntry-item-detail-approval") {
        this.getFinStorageById();
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    getFinStorageById() {
      this.busiType = this.$route.query.storageType === 0 ? "113" : "112";
      let obj = {
        id: parseInt(this.$route.params.id),
        storageType: parseInt(this.$route.query.storageType)
      };
      getFinStorageById(obj).then(res => {
        this.businessCode = res.data.data.tranStorageBO.storageCode;
        this.finType = res.data.data.tranStorageBO.finType;
        res.data.data.tranStorageBO.finType =
          res.data.data.tranStorageBO.finType == 0 ? "物资运输" : "对下计价";
        res.data.data.tranStorageBO.storageType =
          res.data.data.tranStorageBO.storageType == 1
            ? "财务入库"
            : "财务暂估入库";
        this.basicInfoObj = res.data.data.tranStorageBO;
        this.basicInfoObj.storageCount = this.basicInfoObj.storageCount
          ? this.basicInfoObj.storageCount.toFixed(3)
          : "";
        this.basicInfoObj.storageMoney = this.basicInfoObj.storageMoney
          ? this.basicInfoObj.storageMoney.toFixed(2)
          : "";
        this.basicInfoObj.thirdCategoriesOfName =
          this.finType == 0
            ? this.basicInfoObj.thirdCategoriesOfName
            : "运输服务";
        this.storageName = this.basicInfoObj.storageName;

        this.$emit("storageNameValue", this.storageName);
        this.fileList = res.data.data.fileBOList;
        this.fileList.forEach(item => {
          item.createTimeStr = item.createTime;
          item.uploadId = item.fileInfoId;
          item.fileSize =
            Number(item.fileSize.substr(0, item.fileSize.length - 2)) * 1024;
        });
        this.tableData = res.data.data.tranStorageListBOList;
        this.tableData.forEach(item => {
          item.moneyWithTax = item.moneyWithTax
            ? item.moneyWithTax.toFixed(2)
            : "";
          item.storageCount = item.storageCount
            ? item.storageCount.toFixed(3)
            : "";
          item.unitPriceWithTax = item.unitPriceWithTax
            ? item.unitPriceWithTax.toFixed(2)
            : "";
          item.moneyWithoutTax = item.moneyWithoutTax
            ? item.moneyWithoutTax.toFixed(2)
            : "";
        });
        this.tableDataAssociation = res.data.data.tranStorageRelBOList;
        this.tableDataAssociation.forEach(item => {
          item.storageCount = item.storageCount
            ? item.storageCount.toFixed(3)
            : "";
          item.storageMoney = item.storageMoney
            ? item.storageMoney.toFixed(2)
            : "";
        });
        this.isTrue = true;

        this.activities = res.data.data.approvalRecords;
        this.approving =
          this.smpScStatusType[res.data.data.tranStorageBO.approvalStatus];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
      });
    },
    handleBack() {
      this.$router.back();
    },
    // 导出
    handlExport() {
      if (this.$route.query.storageType == 1) {
        this.methodGetPageType = "exportTranStorage";
      } else {
        this.methodGetPageType = "exportTranStorageProv";
      }
    },
    tabChange(item, index) {
      this.focus = item[0];
      this.$refs[item[0]].$el.scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start" // 上边框与视窗顶部平齐。默认值
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (
                column.label == "入库数量" ||
                column.label == "含税金额" ||
                column.label == "不含税金额"
              ) {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          if (column.label == "入库数量") {
            sums[index] = sums[index].toFixed(3);
          }
          // if (column.label == "剩余可入库数量") {
          //   sums[index] = sums[index].toFixed(3);
          // }
          if (column.label == "含税金额") {
            sums[index] = sums[index].toFixed(2);
          }
          if (column.label == "不含税金额") {
            sums[index] = sums[index].toFixed(2);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    // 合计
    getSummaries1(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (column.label == "入库数量" || column.label == "入库金额") {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          if (column.label == "入库数量") {
            sums[index] = sums[index].toFixed(3);
          }
          if (column.label == "入库金额") {
            sums[index] = sums[index].toFixed(2);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, "lookMe");
    console.log(from);
    !(to.fullPath === from.fullPath) &&
      sessionStorage.setItem("fromPath", from.fullPath);
    next();
  },
  // 更改列表缓存状态
  beforeRouteLeave(to, from, next) {
    if (this.submitFlag === true) {
      for (var key in this.$vnode.parent.parent.componentInstance.cache) {
        delete this.$vnode.parent.parent.componentInstance.cache[
          ishasAgentId(to.path, key)
        ];
      }
    }
    this.isTrue = false;
    next();
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-table td,
.el-table th {
  padding: 0 0;
  height: 36px;
}
/deep/.el-col-13 {
  width: 79%;
}

/deep/.detail-info-el-Label {
  position: absolute;
  width: 107px;
  right: 50px;
  top: 31px;
  z-index: 1;
}

.el-none {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
/deep/.extend-btn {
  text-align: right;
  margin-bottom: 15px;
  top: 0px;
  position: relative !important;
}
/deep/.ccui-form {
  margin-top: 0px;
}
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:first-child
  .cell {
  border-right: 1px solid #f1f1f1;
}
/deep/ .el-table__footer-wrapper {
  margin-top: 0px;
}
// 表格合计行样式
/deep/.el-table__footer {
  width: 100% !important;
}

// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
/deep/.el-table--border {
  th:last-of-type.gutter {
    display: table-cell !important;
    width: 0px !important;
  }
}
/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:last-child
  .cell {
  padding-right: 5px !important;
}
</style>
